<template>
  <div>
    <div class="box">
      <router-link to="/more"><i class="el-icon-setting"></i></router-link>
      <div class="head" v-for="item in userMassage" :key="item.id">
        <div class="left">
          <img :src="item.img" alt="">
        </div>
        <div class="right">
          <p>用户名：{{item.username}}</p>
        </div>
          
      </div>
    </div>
    <div class="indent">
      <div class="indent_x">
        <span><router-link to="/payment">我的订单</router-link></span>
        <span><router-link to="/payment">全部订单</router-link></span>
      </div>
      <div class="process">
        <p class="icon">
          <i>
            <router-link to="/after_payment">
              <i class="el-icon-bank-card"></i>
            </router-link>
            </i>
          <i class="el-icon-truck"></i>
          <i>
            <router-link to="/appraise">
              <i class="el-icon-chat-dot-square"></i>
            </router-link>
          </i>
          </p>
        <p class="word">
          <span><router-link to="/after_payment">待付款</router-link></span>
          <span>今日配送</span>
          <span><router-link to="/appraise">待评价</router-link></span>
        </p>
      </div>
    </div>
    <div class="else">
      <p>
        <i class="el-icon-money"></i>
        <i class="el-icon-postcard"></i>
        <i class="el-icon-coin"></i>
        <i class="el-icon-lollipop"></i>
      </p>
      <p>
        <span>优惠券</span>
        <span>权益卡</span>
        <span>积分</span>
        <span>生日/纪念日</span>
      </p>
      <p>
        <i><router-link to="/collect"><i class="el-icon-star-off"></i></router-link></i>  
        <i class="el-icon-headset"></i>
        <i class="el-icon-discover"></i>
        <i class="el-icon-monitor"></i>
      </p>
      <p>
        <span><router-link to="/collect">我的收藏</router-link></span>
        <span>联系客服</span>
        <span>帮助</span>
        <span>关于标准</span>
      </p>

    </div>
    <div class="account">
      <p>
        <span><router-link to="/account">账户管理</router-link></span>
        <span>管理收货地址</span>
      </p>
    </div>
  </div>
</template>

<script>
// import OrderListVue from './OrderList.vue'
import axios from "axios"
  export default {
    data() {
      return {
        userMassage:[],
      }
    },
    mounted() {
      this.getUsermassage()
    },
    methods: {
        getUsermassage(){
        axios({
          url:"http://localhost:3000/user",
        }).then(res=>{
          console.log(res)
          this.userMassage = res.data
        })
    }
    },
  }
</script>

<style scoped lang="scss">
    .box{
      width: 100%;
      height: 27vh;
      color: rgba(80, 80, 80, 1);
      background-color: rgba(153, 153, 153, 1);
      font-size: 14px;
      overflow: hidden;
      .el-icon-setting{
        font-size: 24px;
        color: #fff;
        position: fixed;
        right: 5vw;
        top: 5vh;
      }
      .head{
        width: 50%;
        margin-top:10vh;
        margin-left:20vw;
        display: flex;
        justify-content: space-between;
        .left{
          img{
            width: 66px;
            height: 66px;
            border-radius: 34px;
          }
        }
        .right{
            line-height: 66px;
            color: #fff;
        }
      
      }

    }
    .indent{
      	width: 94%;
        height: 20vh;
        position: fixed;
        left: 3vw;
        top: 23vh;
        color: rgba(80, 80, 80, 1);
        background-color: rgba(233, 233, 233, 1);
        border-radius: 12px;
        font-size: 14px;
        line-height: 150%;
        text-align: center;
        .indent_x{
          padding: 2vh 6vw;
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid gray;
        }
        .process{
          margin-top: 2vh;
        }
        .process .icon{
          flex: 1;
          display: flex;
          justify-content: space-around;
          font-size: 36px;
        }
        .process .word{
          flex: 1;
          display: flex;
          justify-content: space-around;
          font-size: 12px;
        }
    }
    .else{
      width: 94%;
      height: 26vh;
      position: fixed;
      left: 3vw;
      top: 45vh;
      color: rgba(80, 80, 80, 1);
      background-color: rgba(233, 233, 233, 1);
      border-radius: 12px;
      font-size: 14px;
      line-height: 150%;
      text-align: center;
      p{
        display: flex;
        justify-content: space-around;
        padding-top: 2vh;
      }
      i{
        flex: 1;
        font-size: 36px;
      }
      span{
        flex: 1;
        font-size: 12px;
      }
    }
    .account{
      width: 94%;
      height: 7vh;
      position: fixed;
      left: 3vw;
      top: 73vh;
      color: rgba(80, 80, 80, 1);
      background-color: rgba(233, 233, 233, 1);
      border-radius: 12px;
      font-size: 12px;
      line-height: 150%;
      text-align: center;
      p{
        display: flex;
        justify-content: space-between;
        padding: 2vh 8vw;
      }
    }
    
</style>